import React, { useEffect, useState } from "react"
import { useSearchParams, useNavigate } from "react-router-dom"
import http from "../../utils/http"
import {
  InfiniteScroll,
  NavBar,
  Popup,
  Tag,
  Steps,
  List,
  Button,
} from "antd-mobile"
import "./index.css"
import navImg from "../../img/nav.png"
import { CalendarOutline } from "antd-mobile-icons"
import dayjs from "dayjs"
const { Step } = Steps
const Index = () => {
  const navigate = useNavigate()
  const [sql] = useSearchParams()
  const start = sql.get("start")
  const end = sql.get("end")
  const date = sql.get("date")
  const [page, setPage] = useState(1)
  const [isSpeed, setIsSpeed] = useState(false)
  const [isSeat, setIsSeat] = useState(false)
  const [isDesc, setIsDesc] = useState(false)
  const [hasMore, setHasMore] = useState(true)
  const [visible1, setVisible1] = useState(false)
  const [visible2, setVisible2] = useState(false)
  // 接收数据的容器
  const [list, setList] = useState([])
  // 接收详情数据的容器
  const [detail, setDetail] = useState({})
  useEffect(() => {
    setList([])
    setPage(1)
    getList()
  }, [isSpeed, isDesc, isSeat])
  // 获取列表的数据
  async function getList() {
    const result = await http.post("/trip/train", {
      start,
      end,
      date,
      isDesc,
      isSeat,
      isSpeed,
      page,
    })
    const { code, data } = result.data
    if (code === 200) {
      setPage(prev => prev + 1)
      setList([...list, ...data])
    }
    if (data.length === 0) {
      setHasMore(false)
    }
  }
  useEffect(() => {
    const timer = setInterval(() => {
      getList()
    }, 1000 * 10)
    return () => {
      clearInterval(timer)
    }
  }, [])
  // 展开详情页
  const handelGet = item => {
    setDetail(item)
    setVisible1(true)
  }
  if (list.length === 0) {
    return <div>暂无数据</div>
  }
  // 座位等级数据
  const seatClass = ["一等座", "二等座", "特等座"]
  // 票价信息
  const price = [
    list[2].tick.secondTick,
    list[2].tick.firstTick,
    list[2].tick.vip,
  ]
  return (
    <div className="list-contaimner">
      <div className="list-nav">
        <div className="list-nav-tit">
          <img src={navImg} onClick={() => navigate(-1)}></img>
          <h3>
            {start}-{end}
          </h3>
        </div>
        <div className="list-nav-btn">
          <span>前一天</span>
          <div className="list-nav-date">
            <CalendarOutline />
            <span>{dayjs().format("MM/DD")}周一</span>
          </div>
          <span>后一天</span>
        </div>
      </div>
      <div className="list-train-box">
        {list.map((item, index) => (
          <div
            key={index}
            className="list-train-flex"
            onClick={() => handelGet(item)}>
            <div className="list-train-flex-l">
              <span className="searc-sp">{item.startTime}</span>
              <span className="fiex-sp">D3212</span>
              <span className="searc-sp">{item.startTime}</span>
              <span className="searc-sp">{item.start}</span>
              <span className="fiex-sp">1h 12m</span>
              <span className="searc-sp">{item.end}</span>
              <span className="seat-sp">
                二等座 <b>有票</b>
              </span>
              <span className="seat-sp">
                一等座 <b>有票</b>
              </span>
              <span className="seat-sp">
                特等座 <b>18张</b>
              </span>
            </div>
            <div className="list-train-flex-r">￥{item.tick.firstTick}起</div>
          </div>
        ))}
      </div>
      <div className="list-pos-b">
        <span onClick={() => setIsSpeed(prev => !prev)}>高铁动车</span>
        <span onClick={() => setIsDesc(prev => !prev)}>出发时间</span>
        <span onClick={() => setIsSeat(prev => !prev)}>到达时间</span>
      </div>
      <InfiniteScroll loadMore={getList} hasMore={hasMore} threshold={10} />
      <Popup
        showCloseButton
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}>
        <div className="list-detail">
          <div className="list-detail-item">
            <span>{detail.startTime}</span>
            <span>D3212</span>
            <span>{detail.startTime}</span>
            <span>{detail.start}</span>
            <span>1h 12m</span>
            <span>{detail.start}</span>
            <span>
              二等座 <b>有票</b>
            </span>
            <span>
              一等座 <b>有票</b>
            </span>
            <span>
              特等座 <b>18张</b>
            </span>
          </div>
          <div className="list-de-pos">
            <Tag onClick={() => setVisible2(true)}>经停站</Tag>
          </div>
          <Button
            color="primary"
            block
            onClick={() => navigate("/selectperson", { state: detail })}>
            选择乘车人
          </Button>
        </div>
      </Popup>
      <Popup
        showCloseButton
        visible={visible2}
        onMaskClick={() => {
          setVisible2(false)
        }}
        onClose={() => {
          setVisible2(false)
        }}>
        <div style={{ padding: "30px 10px" }}>
          <List>
            {seatClass.map((item, ind) => (
              <List.Item
                extra={<div style={{ color: "orangered" }}>￥{price[ind]}</div>}
                key={ind}>
                {item}
              </List.Item>
            ))}
          </List>
          <Steps direction="vertical">
            <Step title="北京" status="process" />
            <Step title="河北唐山" status="wait" />
            <Step title="河南" status="wait" />
            <Step title="山西" status="wait" />
            <Step title="桂林" status="wait" />
            <Step title="山东" status="wait" />
            <Step title="广东" status="wait" />
            <Step title="广州" status="wait" />
          </Steps>
        </div>
      </Popup>
    </div>
  )
}

export default Index
